<style scoped>
    .wraper {
        padding: 0 30px;
    }

    .search {
        padding-bottom: 20px;
    }

    .search span {
        color: #68777c;
        font-weight: bold;
        padding-right: 18px;
    }

    .search button {
        background-color: #00a8f7;
        color: #fff;
        margin-left: 8px;
    }

    .top {
        margin-bottom: 20px;
        border-top: 1px dashed #cccccc;
    }

    .detail {
        border-top: 1px dashed #cccccc;
    }

    .wraper .headline {
        position: relative;
        font-size: 12px;
        color: #303134;
        font-weight: bold;
        margin: 10px 0;
        line-height: 32px;
        height: 32px;
    }

    .wraper .add-agent {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #348bf2;
        color: #fff;
    }

    .iconfont {
        font-size: 14px;
    }

    .red-font {
        color: #ff1f1f;
    }

    /* 分页 start */

    .page {
        margin: 20px 0;
    }

    .ivu-page {
        padding-bottom: 150px;
    }

    /* 分页 end */

    .fixed-bottom {
        padding-left: 20px;
        padding-right: 20px;
        height: 80px;
        line-height: normal !important;
        position: fixed;
        left: 210px;
        right: 0;
        bottom: 0;
        z-index: 999;
        text-align: center;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
    }

    .sidehide {
        left: 75px;
    }
</style>
<style>
    .noborder label.ivu-form-item-label {
        border: none;
        background: transparent;
    }
</style>

<template>
    <div class="manage">
        <product-title></product-title>
        <div class="wraper">
            <div class="detail">
                <div class="headline">
                    <Row style="margin-top:20px;">
                        <Col :md="24" :lg="2" offset='22'>
                        <Button size="large" class="fr" type="success" icon="plus" @click="addMan">新增</Button>
                        </Col>
                    </Row>
                </div>
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table ref="currentRowTable" size="large" stripe highlight-row border :columns="columns_rank" :data="data_rank"></Table>
                    </div>
                </div>
            </div>
            <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="12">
                    <Button type="primary" size="large" class="fl mr10">修改</Button>
                    <Button type="error" size="large" class="fl mr10 ">删除</Button>
                    <!-- <Button type="success" :disabled="tableaction" size="large" class="fl mr10" @click="modalTrue">设置账号</Button> -->
                    </Col>

                </Row>
            </div>
        </div>


        <Modal v-model="showAddModal" ok-text="提交" :mask-closable='closeable' width="600" title="新增职级" @on-ok="add" @on-cancel="cancel"
            :loading="loading" class-name="common-box-body">
            <Row>
                <Col class="common-box-body">
                <Form :model="org" ref="org">
                    <Form-item label="职级名称">
                        <Input placeholder="请输入职级名称" v-model="org.name"></Input>
                    </Form-item>
                    <Form-item label="职级别称">
                        <Input placeholder="请输入职级别称" v-model="org.nameto"></Input>
                    </Form-item>
                    <Form-item label="职称">
                        <Select placeholder="请选择" v-model="org.cate">
                            <Option value="1">1</Option>
                            <Option value="2">2</Option>
                            <Option value="3">3</Option>
                            <Option value="4">4</Option>
                            <Option value="5">5</Option>
                            <Option value="6">6</Option>
                            <Option value="7">7</Option>
                            <Option value="8">8</Option>
                            <Option value="9">9</Option>
                            <Option value="10">10</Option>
                        </Select>
                    </Form-item>
                    <div style="color:red;">
                        注：数字越大等级越高
                    </div>
                </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle'
    import {
        rankList
    } from '../../api/rank'
    import util from '../../libs/util.js';
    export default {
        data() {
            return {
                // tableaction:true, //
                showAddModal: false, //点击设置,弹出模态框
                closeable: false, //shif按ese按钮退出
                loading: true,
                tableloading: true,
                columns_rank: [{
                        type: 'index',
                        title: '序号',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '职级名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '职级别称',
                        key: 'aname',
                        align: 'center',
                    },
                    {
                        title: '是否是领导',
                        key: 'leader',
                        align: 'center',
                        render: (h, params) => {
                            return h("div", params.row.leader == 1 ? '是' : '否');
                        }
                    },
                ],
                data_rank: [

                ],
                org: {
                    name: '',
                    nameto: "",
                    cate:'1'
                },
            }
        },
        components: {
            productTitle
        },
        computed: {
            slidetoggle() {
                return this.$store.state.sildeshow
            },
        },
        created() {

        },
        mounted() {
            this.getList()
        },
        methods: {
            // 选中表单的其中一项,进行数据删除处理
            //选中当前行数据
            // tableCurrentChange(currentRow,oldCurrentRow){
            //         this.tableaction = false;
            //         this.current = currentRow;
            //         console.log(this.current,'当前数据信息')
            //         this.current.mogon_id=currentRow._id
            // },
            addMan() {
                this.showAddModal = true;
            },
            // 获取职级列表
            getList() {
                this.tableloading = true
                new Promise((resolve, reject) => {
                    rankList().then(response => {
                        this.tableloading = false
                        console.log(response.data);
                        if (response.data.err == 0) {
                            this.data_rank = response.data.data;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            add() {

            },
            cancel() {
                // this.$refs['org'].resetFields(); 
            },
        }
    }
</script>